<template>
	<view class="indexBox">
		<u-sticky bgColor="#fff">
		    <u-tabs :list="tabsList" :scrollable="false" :current="current" @change="currentChange"></u-tabs>
		</u-sticky>
		<!-- 内容1 表单内容 -->
		<view class="" v-show="current == 0">
			<leaveFrom :processId="processId" :propFromData="fromData" :remainingNum="remaining" />
		</view>
		<processDetial v-show="current == 1" :processId="processId" :approvalInfo="approvalInfo" @init="initFun" />
	</view>
</template>

<script>
	import leaveFrom from '@/pages/process/leave/create.vue'
	import processDetial from '@/pages/process/processDetial.vue'
	import {getApprovalDetail,approveTask,rejectTask,getTaskListByProcessInstanceId} from '@/api/oa/common.js'
	import {getLeave,useVacation} from '@/api/oa/leave/index.js'
	export default {
		components:{
			leaveFrom,
			processDetial
		},
		data() {
			return {
				// tabs选中
				current:0,
				tabsList: [{
					name: '详情',
				}, {
					name: '流转',
				}],
				// 流程id
				processId:'',
				// 审批信息详情
				approvalInfo:{},
				// 表单信息
				fromData:{},
				// 审批表单
				spFormData:{
					type:'',
					reason:'',
				},
				typeList:[
					{ value: 1, text: "通过" },
					{ value: 2, text: "拒绝" },
				],
				processArr:[],
				// 当前登录用户信息
				userInfo:{},
				// 剩余天数
				remaining:0,
			};
		},
		methods:{
			currentChange(val){
				console.log(val)
				this.current = val.index;
			},
			// 根据流程id获取表单内容
			async getFromData(){
				let fromData=  await getLeave({
					id:this.approvalInfo.processInstance.businessKey
				});
				let remaining = await useVacation({
					leaveType: fromData.data.type,
					userId: fromData.data.userId
				})
				this.remaining = remaining.data;
				fromData.data.type = String(fromData.data.type)
				this.fromData = fromData.data;
			},
			async initFun(){
				uni.showLoading({
					title:'加载中'
				})
				let info = await getApprovalDetail({
					processInstanceId:this.processId
				});
				this.approvalInfo = info.data;
				// 获取表单信息
				this.getFromData()
				uni.hideLoading()
			}
		},
		async onLoad(option) {
			console.log(option);
			// 获取审批详情
			this.processId = option.id;
			this.userInfo = uni.getStorageSync('loginFrom')
			this.initFun()
		}
	}
</script>

<style lang="less" scoped>
	.spBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		margin-top: 20rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
		.titles{
			font-size: 30rpx;
			padding: 0 30rpx;
			color: #333;
			margin: 20rpx 0;
		}
		.spList{
			width: 100%;
			height: auto;
			padding: 0 30rpx;
			box-sizing: border-box;
			.items{
				display: flex;
				align-items: flex-start;
				margin-top: 20rpx;
				position: relative;
				z-index: 100;
				.iconBox{
					width: 60rpx;
					height: 60rpx;
					background-color: rgb(63 115 247);
					border-radius: 50%;
					color: #fff;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					flex: none;
					.ztBox,.jzz,.wks,.jj{
						position: absolute;
						width: 38rpx;
						height: 38rpx;
						background-color: #fff;
						display: flex;
						margin: 0 auto;
						border-radius: 50%;
						right: -10rpx;
						bottom: -10rpx;
						view{
							width: 34rpx;
							height: 34rpx;
							background-color: #00b32a;
							border-radius: 50%;
							margin: 0 auto;
							overflow: hidden;
							margin-top: 3rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					.jzz{
						view{
							background-color: #337ecc;
						}
					}
					.wks{
						view{
							background-color: #ccc;
						}
					}
					.jj{
						view{
							background-color: red;
						}
					}
				}
				.conBox{
					flex: 1;
					min-height: 160rpx;
					background-color: rgba(234, 229, 234, 0.8);
					border-radius: 6rpx;
					padding: 20rpx;
					box-sizing: border-box;
					margin-left: 50rpx;
					.title{
						font-size: 30rpx;
						font-weight: bold;
					}
					.itemCon{
						.names,.infos{
							font-size: 24rpx;
						}
						.names{
							margin: 10rpx 0;
						}
						.infos{
							color: #8b8b8b;
						}
					}
					
				}
				&::after{
					content: '';
					display: block;
					border-left:2px solid #e4e7ed;
					height: 100%;
					position: absolute;
					left: 30rpx;
					top: 20rpx;
					z-index: -1;
				}
				&:first-child{
					margin-top: 0;
				}
				&:last-child{
					&::after{
						display: none;
					}
				}
			}
		}
	}
	.spOperate{
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 50rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 20rpx;
	}
</style>